<template>
	<div class="detail">
		<div class="detailTop">
			<van-swipe class="my-swipe" lazy-render :show-indicators='isshow'>
			  <van-swipe-item v-for="image in images" :key="image">
			    <img :src="image" />
			  </van-swipe-item>
			</van-swipe>	
			<div class="detailPrice">
				<div class="price">
					<div class="priceFu">￥</div>
					<div class="pricePr">59.00</div>
					<div class="priceYh">优惠价</div>
				</div>
				<div class="sales">
					已售999
				</div>
			</div>
			<div class="detailName">
				比迪比加绒高帮帆布鞋女2023冬季新款百搭潮学生韩版二棉鞋
			</div>
		</div>
		<div class="detailFoot">
			<div class="item add" @click="addCart">加入购物车</div>
			<div class="item buy">立即购买</div>
		</div>
	</div>
	
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let isshow = ref(true)
	let images = ref(['/images/list-1.webp', '/images/list-2.webp', '/images/list-3.webp', '/images/list-4.webp'])

</script>

<style scoped>
	.detail {
		background-color: #e9d9d9;
	}

	.detail .detailTop .my-swipe .van-swipe-item {
		width: 100%;
		height: 30rem;
		text-align: center;
	}

	.detail .detailTop .detailPrice {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.6375rem 0.325rem 0.325rem 0.325rem;
		box-sizing: border-box;
	}

	.detail .detailTop .detailPrice .price {
		display: flex;
		align-items: center;
	}

	.detail .detailTop .detailPrice .price .priceFu {
		font-size: 0.8rem;
	}

	.detail .detailTop .detailPrice .price .pricePr {
		font-weight: 600;
	}

	.detail .detailTop .detailPrice .price .priceYh {
		font-size: 0.8rem;
		margin-left: 0.1875rem;
		background-color: rgb(255, 236, 239);
		color: rgb(255, 68, 102);
		padding: 0.0625rem 0.0625rem;
	}

	.detail .detailTop .detailPrice .sales {
		font-size: 0.6rem;
		color: #666;
	}

	.detail .detailTop .detailName {
		padding: 0rem 0.325rem 0.325rem 0.325rem;
		font-size: 0.7rem;
	}

	.detail .detailFoot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		
	}

	.detail .detailFoot .item {
		width: 50%;
		text-align: center;
		line-height: 2rem;
		height: 100%;
		font-size: 0.7rem;
	}

	.detail .detailFoot .add {
		background-color: rgb(255, 236, 239);
		color: rgb(255, 68, 102);
	}

	.detail .detailFoot .buy {
		background-color: rgb(255, 87, 119);
		color: rgb(255, 255, 255);
	}
</style>